<template>
   <el-card>
        <el-form inline="true" :disabled="scene==1? true:false">
            <el-form-item label="一级标题">
                <el-select v-model="categoryStore.c1Id" @change="handler">
                    <!-- option:label即为展示的数据 value:属性即为select下拉菜单收集的数据(ID) -->
                    <el-option  v-for="(c1, index) in categoryStore.c1Arr" :key="index" :value="c1.id" :label="c1.name" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级标题">
                <el-select v-model="categoryStore.c2Id"  @change="handlers">
                    <el-option v-for="(c2, index) in categoryStore.c2Arr" :key="index" :value="c2.id" :label="c2.name" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-model="categoryStore.c1Id" label="三级标题">
                <el-select v-model="categoryStore.c3Id" @change="getdata">
                    <el-option v-for="(c3, index) in categoryStore.c3Arr" :key="index" :value="c3.id" :label="c3.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template> 

<script setup lang="ts">
//引入组件挂载完毕的方法
import {onMounted} from 'vue'
//引入分类相关的仓库
import useCategoryStore from '@/store/modules/category'
let categoryStore=useCategoryStore()

onMounted(()=>{
    //获取一级分类的 数据
    getC1() 
})
    //获取一级分类的数据方法
const  getC1=async()=>{
    //通知分类仓库获取一级分类的数据
    await  categoryStore.getC1()
}
//此方法为一级分类的下拉菜单的change事件(选中值的时候发送请求,并返回数据)
const handler=async()=>{
    categoryStore.c2Id=''
    categoryStore.c3Id=''
    categoryStore.c3Arr=[]

  await  categoryStore.getC2()


}
//此方法为二级分类的下拉菜单的change事件(选中值的时候发送请求,并返回数据)
const handlers=async()=>{
    categoryStore.c3Id=''
    categoryStore.c3Arr=[]
    categoryStore.getC3()
}
// 获取所有的数据
const getdata=async()=>{
    // console.log(categoryStore.c1Id);
    // console.log(categoryStore.c2Id);
    // console.log(categoryStore.c3Id);    
}

//接收父组件传过来的数据scene
defineProps(['scene'])
</script>

<style lang="scss" scoped>

</style>